<template>
  <div>
    <el-form ref="form" :model="form" size="small" label-width="120px" style="margin-top: 10px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            label="是否显示背景图"
            prop="sfxs"
            :rules="[{ required: true, message: '请选择是否显示背景图', trigger: 'change' }]"
          >
            <el-radio-group v-model="form.sfxs">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="上传背景图"
            prop="bjt"
            :rules="[{ required: true, message: '请上传背景图', trigger: 'change' }]"
          >
            <el-upload
              :action="imagesUploadEditorApi"
              class="avatar-uploader"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :before-upload="beforeAvatarUpload"
            >
              <el-image
                v-if="form.bjt"
                :src="form.bjt"
                style="height: 32px;width: 32px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="背景图示例"
          >
            <el-image
              v-if="form.bjt"
              :src="form.bjt"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="上传默认图标"
            prop="mrtp"
            :rules="[{ required: true, message: '请上传默认图标', trigger: 'change' }]"
          >
            <el-upload
              :action="imagesUploadEditorApi"
              class="avatar-uploader"
              :show-file-list="false"
              :on-success="handleAvatarSuccessMrtp"
              :on-error="handleAvatarError"
              :before-upload="beforeAvatarUpload"
            >
              <el-image
                v-if="form.mrtp"
                :src="form.mrtp"
                style="height: 32px;width: 32px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="primary" @click="save('form')">确认</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { updateObject } from '@/api/tp/tpl/index';
export default {
  name: 'AppServiceList',
  props: {
    template: {
      type: Object,
      require: true
    }
  },
  computed: {
    ...mapGetters(['imagesUploadEditorApi'])
  },
  data() {
    return {
      loading: false,
      form: {
        sfxs: false,
        bjt: null,
        mrtp: null
      },
      defaultForm: {
        sfxs: false,
        bjt: null,
        mrtp: null
      },
      status: [{ id: 0, value: false, label: '否' },
        { id: 1, value: true, label: '是' }],
      isBlob: [{ id: 0, value: false, label: '无' },
        { id: 1, value: true, label: '有' }]
    };
  },
  watch: {
    template: {
      handler(newName, oldName) { // 值发生变化时
        if (newName !== undefined &&
          newName.pzx !== undefined &&
          newName.pzx !== '' &&
          newName.pzx !== null
        ) {
          this.form = JSON.parse(newName.pzx);
        } else {
          this.form = Object.assign({}, this.defaultForm);
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.template.pzx = JSON.stringify(this.form);
          updateObject(this.template).then(res => {
            this.$message.success('保存成功！');
          }).catch(() => {
            this.$message.error('保存失败！');
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.bjt = res.url;
    },
    handleAvatarSuccessMrtp(res, file) {
      this.form.mrtp = res.url;
    },
    handleAvatarError(err, file) {
      this.$message.error(err);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('只能上传png图片!');
      }
      if (!isLt2M) {
        this.$message.error('上传上传图片大小不能超过2MB!');
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style scoped>

</style>
